<!-- directive:title $state 详解 -->
<!-- directive:breadcrumb$state详解 -->
<div class='panel-body'>
    <div class='panel panel-default'>
        <div class='panel-heading'> ui-sref </div>
        <div class='panel-body'>
            <p>$stateParams = {{stateparam}}</p>
            <p>$location.search() = {{ search }}</p>
            <h4>页面跳转 时间戳 {{ time }}</h4>
            <h4 class="text-danger">因为点击后再次点击会reload页面</h4>
            <h1 class="text-danger">重新加载本页面 ui-sref-opts="{reload: true}" 或者 $state.reload('app.toMenu')</h1>
            <div>
                <button class="btn btn-sm btn-default" ui-sref="app.ng.ng23" ui-sref-opts="{reload: true}">跳转 ui-sref="app.ng.ng23"</button>
                <a class="btn btn-sm btn-default" href="#!/app/ng/ng23">跳转 href="#!/app/ng/ng23"</a>
            </div>
            <h6>路由声明</h6>
            <h6>{page:10,leaf:18,power:'18',title:'$state详解',name:'app.ng.ng23',icon:'cubes',params:{name:null},templateUrl:require('#/ng/ng23.view.html'),controller:require('#/ng/ng23.controller')},</h6>
            <div>
                <button class="btn btn-sm btn-default" ui-sref="app.ng.ng23({name:321})" ui-sref-opts="{reload: true}">跳转 app.ng.ng23({name:321})</button>
                <button class="btn btn-sm btn-default" ui-sref="app.ng.ng23({name:d1})" ui-sref-opts="{reload: true}">跳转 app.ng.ng23({name:d1}) 变量($scope.d1 = 444;)</button>
                <a class="btn btn-sm btn-default" href="#!/app/ng/ng23?name=123">跳转 #!/app/ng/ng23?name=123</a>
            </div>
            <h6>路由声明与上面不同</h6>
            <h6>{page:10,leaf:18,power:'18',title:'$state详解',name:'app.ng.ng23',url:'/app/ng/ng23?id',icon:'cubes',params:{name:null},templateUrl:require('#/ng/ng23.view.html'),controller:require('#/ng/ng23.controller')},</h6>
            <div>
                <a class="btn btn-sm btn-default" href="#!/app/ng/ng23/888"><del>跳转 #!/app/ng/ng23/888</del></a>
                <a class="btn btn-sm btn-default" href="#!/app/ng/ng23/{{d1}}"><del>跳转 #!/app/ng/ng23/[[d1]]</del></a>
            </div>
            <h6>官方是这么鼓励的但是使用者会很不爽</h6>
            <h6>不注册传参 能能用超链接方式 使用location.search获取参数</h6>
            <div>
                <button class="btn btn-sm btn-default" ui-sref="app.ng.ng23({sex:1})" ui-sref-opts="{reload: true}">跳转 ui-sref="app.ng.ng23({sex:1})</button>
                <a class="btn btn-sm btn-default" href="#!/app/ng/ng23?sex=2">跳转 #!/app/ng/ng23?sex=2</a>
            </div>
        </div>
    </div>
    <div class='panel panel-default'>
        <div class='panel-heading'> $stateParams </div>
        <div class='panel-body'>
            <p>$stateParams = {{stateparam}}</p>
        </div>
    </div>
    <div class='panel panel-default'>
        <div class='panel-heading'> $location </div>
        <div class='panel-body'>
            <p>完整url路径: <span>{{absurl}}</span></p>
            <p>url路径(当前url#后面的内容,包括参数和哈希值): <span>{{url}}</span> <button class="btn btn-default" ng-click="changeUrl()">改变</button> </p>
            <p>相对路径(也就是当前url#后面的内容,不包括参数): <span>{{path}}</span> <button class="btn btn-default" ng-click="changePath()">改变</button> </p>
            <p>协议(比如http,https): <span>{{protocol}}</span></p>
            <p>主机名: <span>{{host}}</span></p>
            <p>端口号: <span>{{port}}</span></p>
            <p>哈希值: <span>{{hash}}</span> <button class="btn btn-default" ng-click="changeHash()">改变</button> </p>
            <p>search值序列化json: <span>{{search}}</span> </p>
            <button class="btn btn-default" ng-click="changeSearch_1()">改变1</button>
            <button class="btn btn-default" ng-click="changeSearch_2()">改变2</button>
            <button class="btn btn-default" ng-click="changeSearch_3()">改变3</button>
            <button class="btn btn-default" ng-click="changeSearch_4()">改变4</button>
            <button class="btn btn-default" ng-click="changeSearch_5()">改变5</button>
            <button class="btn btn-default" ng-click="changeSearch_6()">改变6</button>
        </div>
    </div>
    <div class='panel panel-default'>
        <div class='panel-heading'> $state </div>
        <div class='panel-body'>
            <p>$state.params = {{state.params}}</p>
            <p>$state.current = {{state.current}}</p>
            <p> // cao 原来state里面有路由注册的一切信息啊</p>
        </div>
    </div>
    <div class='panel panel-default'>
        <div class='panel-heading'> $state.go </div>
        <div class='panel-body'>
            <pre better-pre>
                $state.go
                $state.go(to, [,toParams],[,options])
                形参to是string类型，必须，使用"^"或"."表示相对路径；
                形参toParams可空，类型是对象；
                形参options可空，类型是对象，字段包括：
                    location为bool类型默认true,
                    inherit为bool类型默认true,
                    relative为对象默认$state.$current,
                    notify为bool类型默认为true,
                    reload为bool类型默认为false
                $state.go('photos.detail')
                $state.go('^')到上一级,比如从photo.detail到photo
                $state.go('^.list')到相邻state,比如从photo.detail到photo.list
                $state.go('^.detail.comment')到孙子级state，比如从photo.detail到photo.detial.comment
            </pre>
        </div>
    </div>
</div>

